<template>
  <div class="qiuzhi">
    <div class="huangye_body minh389">
      <div v-if="!isZhaopin">
        <div class="shangxuan_sy">
          <div class="search_c">
            <div class="title_p">资源分类:</div>
            <div class="leibie">
              <div
                class="li_text"
                :class="{ active: danweileixingSel == 0 }"
                @click="duoSearch(0, 'ziyuan')"
              >
                全部
              </div>
              <div
                class="li_text"
                v-for="(item, index) in danweileixing"
                :key="index"
                :class="{ active: danweileixingSel == index + 1 }"
                @click="duoSearch(index + 1, 'ziyuan')"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="search_c">
            <div class="title_p">业务分类:</div>
            <div class="leibie">
              <div
                class="li_text"
                :class="{ active: yewuleixingSel == 0 }"
                @click="duoSearch(0, 'yewu')"
              >
                全部
              </div>
              <div
                class="li_text"
                v-for="(item, index) in yewuleixing"
                :key="index"
                @click="duoSearch(index + 1, 'yewu')"
                :class="{ active: yewuleixingSel == index + 1 }"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="search_c">
            <div class="title_p">区域:</div>
            <div class="leibie">
              <div
                class="li_text"
                :class="{ active: cityListSel == 0 }"
                @click="duoSearch(0, 'quyu')"
              >
                全部
              </div>
              <div
                class="li_text"
                v-for="(item, index) in cityList"
                :key="index"
                @click="duoSearch(index + 1, 'quyu')"
                :class="{ active: cityListSel == index + 1 }"
              >
                {{ item.provinceName }}
              </div>
            </div>
          </div>
          <div class="search_c">
            <div class="search_input_hy">
              <el-input
                placeholder="请输入标题"
                v-model="biaotiInput"
                class="input-with-select"
              >
                <span slot="append"  @click="duoSearch(0, 'key')">
                  按标题搜索
                  <el-button icon="el-icon-search" class="hy_btn"></el-button>
                </span>
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="qiuzhi_content">
        <div class="content_left">
          <div class="tuiguang">
            <div class="title_c">最新网员</div>
            <div class="wangyuan">
              <div class="wangy_li" v-for="(item, index) in 12" :key="index">
                范德萨发生法撒旦
              </div>
            </div>
          </div>
          <img src="@assets/img/huangye/vip.jpg" alt="" class="tui_img" />
        </div>
        <div class="content_right">
          <div class="right_nav_qz">
            <div class="nav_c_left"></div>
            <div class="ri_search"></div>
          </div>
          <div class="right_gong_list_hy_sy">
            <div
              class="cc_li"
              v-for="(item, index) in gongRightList"
              :key="index"
            >
              <div class="pt1_g">
                <div class="tt2">{{ item.webtitle }}</div>
              </div>
              <div class="pt2_g">
                <div class="sm_con">联系电话 ：{{ item.webdianhua }}</div>
              </div>
            </div>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="gongRightList.length"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import City from "@/until/city.js";
import { Message } from "element-ui";
export default {
  components: {},
  data() {
    return {
      biaotiInput: "",
      isZhaopin: false,
      huangNav: [
        { title: "企业招聘", url: "" },
        { title: "人才求职", url: "" },
      ],
      tuiguangList: [
        { title: "工程部经理", address: "郑州", type: "面谈", url: "" },
        { title: "成本部经理", address: "郑州", type: "面谈", url: "" },
        { title: "一级建造师", address: "郑州", type: "面谈", url: "" },
        { title: "施工安全工作人员", address: "郑州", type: "面谈", url: "" },
        { title: "工程部经理", address: "郑州", type: "2000到4000", url: "" },
      ],
      activeIndex: "1",
      currentPage3: 1,
      gongRightList: [],
      danweileixing: [],
      yewuleixing: [],
      cityList: [],
      danweileixingSel: 0,
      yewuleixingSel: 0,
      cityListSel: 0,
    };
  },
  mounted() {
    //资源类型
    this.$getApi("/common/danweitype", {}).then((res) => {
      console.log(res);
      this.danweileixing = res.data;
    });
    //业务类型
    this.$getApi("/common/yewutype", {}).then((res) => {
      this.yewuleixing = res.data;
    });
    console.log(City);
    this.cityList = City;
    this.duoSearch(0,'ziyuan')
  },
  methods: {
    duoSearch(index, type) {
      if (type == "ziyuan") {
        this.danweileixingSel = index;
      }
      if (type == "yewu") {
        this.yewuleixingSel = index;
      }
      if (type == "quyu") {
        this.cityListSel = index;
      }
      if (type == "key") {
        
        this.$getApi("/common/companylist", {key:this.biaotiInput}).then((res) => {
          console.log(res);
          this.gongRightList = res.data
        });
        return false;
        
      }
      let yewutype = "";
      let ziyuantype = "";
      let city = "";
      if(this.danweileixingSel != 0){
        console.log(this.danweileixing,this.danweileixing[this.danweileixingSel - 1])
        ziyuantype =  this.danweileixing[this.danweileixingSel - 1].name
      }else{
        ziyuantype = ""
      }
      if(this.yewuleixingSel != 0){
        yewutype =  this.yewuleixing[this.yewuleixingSel - 1].name
      }else{
        yewutype = ""
      }
      if(this.cityListSel != 0){
        city =  this.cityList[this.cityListSel - 1].provinceName
      }else{
        city = ""
      }
      let dataL = {
        yewutype:yewutype,
        ziyuantype: ziyuantype,
        city: city,
      };
      this.$getApi("/common/companylist", dataL).then((res) => {
        console.log(res);
        this.gongRightList = res.data
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    ccc(pp) {
      console.log(pp);
    },
  },
};
</script>
<style lang=stylus>
.right_nav_qz {
  .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }
}
</style>
<style scoped lang="stylus">
.search_input_hy {
  display: block;
  width: 500px;
}

.qiuzhi {
  .huangye_body {
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
  }

  .fill_img {
    padding-top: 12px;
  }

  .qiuzhi_content {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;

    .content_left {
      width: 226px;

      .tui_img {
        margin-top: 8px;
      }

      .tuiguang {
        border-bottom: 6px solid #f0f0f0;

        .title_c {
          height: 36px;
          line-height: 36px;
          background-color: #2172ce;
          font-size: 16px;
          color: #fff;
          padding-left: 20px;
        }

        .wangy_li {
          padding: 12px 10px 0;
          font-size: 15px;
        }
      }
    }

    .content_right {
      width: 764px;
    }
  }
}

.shangxuan_sy {
  border: 1px solid #f0f0f0;
  // margin-top: 16px;

  .search_c {
    display: flex;
    padding: 10px;

    +.search_c {
      border-top: 1px solid #f0f0f0;
    }

    .title_p {
      font-size: 16px;
      padding-right: 10px;
      width: 80px;
      flex-shrink: 0;
    }

    .leibie {
      display: inline-flex;
      flex-wrap: wrap;

      .li_text {
        +.li_text {
          border-left: 1px solid #f0f0f0;
        }

        height: 26px;
        line-height: 26px;
        padding: 0 20px;
        margin-bottom: 4px;
        color: #0a4678;
        cursor: pointer;

        &:hover {
          color: #ff702d;
        }
      }

      .li_text.active {
        color: #ff702d;
      }
    }
  }
}

.right_gong_list_hy_sy {
  padding: 6px 6px 10px;
  background-color: #f0f0f0;

  .cc_li {
    background-color: #fff;
    padding: 10px 12px 60px;
    margin-bottom: 6px;
    border-radius: 4px;

    .pt1_g {
      display: flex;
      padding: 6px 0;

      .tt1 {
        color: #C31111;
        font-size: 16px;
        margin-right: 20px;
      }

      .tt2 {
        font-size: 20px;
        color: #666;
        padding-right: 6px;
      }
    }

    .pt2_g {
      display: flex;
      color: #999;

      .sm_con {
        margin-right: 20px;
        font-size: 16px;
        color: #b80707;
      }
    }
  }
}

.tuiguang_li_sy {
  padding: 6px 4px 0 4px;
  background-color: #f0f0f0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;

  .nei_bd {
    background-color: #fff;
    padding: 2px 6px 6px;

    &:hover {
      // background-color #007ce0
      // cursor pointer
      // .title_t{
      // color #fff
      // }
      // .neirong{
      // color #fff
      // }
      box-shadow: 0px 0px 6px #007ce0 inset;
      border-radius: 4px;
    }
  }

  .title_t {
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
    color: #2172ce;
    font-size: 16px;
    cursor: pointer;
  }

  .con_c {
    .neirong {
      padding-left: 10px;
    }
  }
}
</style>
